<template>
    <!-- message-navBar -->
    <div class="mes-Nav">
        <van-nav-bar title="消息" />
    </div>

    <!-- message-cell -->
    <div class="cell-List">
        <van-cell-group>
            <van-cell v-for="item in cellList" :key="item.id" :icon="item.cell_icon" :title="item.name"
                :label="item.cell_news" :value="item.cell_content" />
            <!-- icon图片路径，lable描述，value内容 -->
        </van-cell-group>
    </div>

</template>

<script setup>
const cellList = [
    { cell_icon: 'src/images/avatar1.jpg', name: '食品旗舰店', cell_news: '您有一条店铺消息', cell_content: '星期一' },
    { cell_icon: 'src/images/avatar2.jpg', name: '水果旗舰店', cell_news: '亲爱的果粉：', cell_content: '星期二' },
    { cell_icon: 'src/images/avatar3.png', name: '订阅号消息', cell_news: '水果旗舰店：【新到水果新...', cell_content: '星期日' },
    { cell_icon: 'src/images/avatar4.png', name: '消息号内容', cell_news: '食品旗舰店：大量新品到货...', cell_content: '星期一' },
]
</script>

<style scoped>
.mes-Nav {
    --van-nav-bar-background: #ff8001;
    --van-nav-bar-title-text-color: #fff;
}

.cell-List {
    --van-cell-font-size: 16px;
    --van-cell-icon-size: 40px;
    --van-cell-large-title-font-size: 14px;
}
</style>